<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
            <el-tab-pane label="用户管理" name="first"></el-tab-pane>
            <el-tab-pane label="已认证" name="second"></el-tab-pane>
            <el-tab-pane label="待审核" name="third"></el-tab-pane>
            <el-tab-pane label="未认证" name="fourth"></el-tab-pane>
            <el-tab-pane label="已迁出" name="fifth"></el-tab-pane>
            <div style="margin-top:5px">

                <span style="margin-left: 30px">业主姓名：</span>
                <el-input v-model="landlord.name" style="width: 180px;" placeholder="请输入姓名"></el-input>

                <span style="margin-left: 30px">业主电话：</span>
                <el-input v-model="landlord.phone" style="width: 180px" placeholder="请输入电话号码"></el-input>

                <span style="margin-left: 30px">业主住址：</span>
                <el-input v-model="landlord.place" style="width: 180px" placeholder="请输入住址"></el-input>

                <el-button style="margin-left: 50px" type="primary" @click="doSelect" icon="el-icon-search">查找
                </el-button>
                <el-button style="margin-left: 40px" type="success" @click="doDownload" icon="el-icon-upload2">导出
                </el-button>

                <br />


                <div style="margin-top:15px">
                    <span style="margin-left: 30px">提交时间：</span>
                    <el-date-picker v-model="value" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                        @change="getTime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>



                    <!-- 用于后续业主存取头像
                    <el-upload class="avatar-uploader" action="http://localhost:8080/api/v1/yz/photo" v-loading="loading"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <img :src="imgSrc"> -->
                    <el-button icon="el-icon-edit" style="margin-left: 40px" type="primary" @click="show">新增账号
                    </el-button>

                    <el-upload action="http://localhost:8080/api/v1/yz/input" :show-file-list="false"
                        accept=".xlsx,.xls" :limit=1 :on-success="importExcel" :headers="headers" class="excel"
                        style="display:inline-block">
                        <el-button type="success" icon="el-icon-download">批量导入账号</el-button>
                    </el-upload>
                </div>


            </div>



            <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%;margin-top: 20px;"
                :stripe="false" :border="true" :highlight-current-row="true" v-loading="isload">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="75">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="120">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="50">
                </el-table-column>
                <el-table-column prop="place" label="住址">
                </el-table-column>
                <el-table-column prop="idCard" label="身份证号">
                </el-table-column>
                <el-table-column prop="subTime" label="提交时间">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="85">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 'y'" type="success">已认证</el-tag>
                        <el-tag v-if="scope.row.status == 's'">待审核</el-tag>
                        <el-tag v-if="scope.row.status == 'n'" type="warning">未认证</el-tag>
                        <el-tag v-if="scope.row.status == 'x'" type="info">已迁出</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="用户名" width="75">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="doExamine(scope.row)"
                            v-if="scope.row.status == 's'">审核
                        </el-button>
                        <br v-if="scope.row.status == 's'" />
                        <el-button size="mini" @click="doEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top:30px">
                <el-pagination :background="true" @size-change="changeSize" :current-page="landlord.page"
                    :page-sizes="pagesizes" :page-size="landlord.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="dochangePage"
                    @prev-click="dochangePage" @next-click="dochangePage">
                </el-pagination>
            </div>


            <el-drawer :visible.sync="dialog" direction="rtl" ref="drawer" :modal-append-to-body="false"
                :lock-scroll="true" :show-close="false" :wrapperClosable="false" size="27%">
                <div>
                    <div style="text-align: center">
                        <el-button type="success" size="small" icon="el-icon-circle-check" @click="doPass"
                            :loading="dialogloading">通过</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="danger" size="small" icon="el-icon-circle-close" @click="doReject">驳回
                        </el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="primary" size="small" icon="el-icon-caret-left" @click="cancelForm">返回
                        </el-button>
                    </div>
                    <el-form :model="form" style="margin-top:20px;margin-left:20px">
                        <el-form-item label="姓名：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.name}}</span>
                        </el-form-item>
                        <el-form-item label="性别：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.gender}}</span>
                        </el-form-item>
                        <el-form-item label="电话号码：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.phone}}</span>
                        </el-form-item>
                        <el-form-item label="住址：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.place}}</span>
                        </el-form-item>
                        <el-form-item label="身份证号：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.idCard}}</span>
                        </el-form-item>
                        <el-form-item label="状态：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <el-tag effect="plain">待审核</el-tag>
                        </el-form-item>
                        <el-form-item label="提交时间：" :label-width="formLabelWidth" class="demo-drawer__content">
                            <span class="myspan">{{form.subTime}}</span>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>


            <el-drawer :visible.sync="editDialog" direction="rtl" ref="editDrawer" :modal-append-to-body="false"
                :lock-scroll="true" :show-close="false" :wrapperClosable="false" size="27%" :before-close="handleClose"
                class="drawer">
                <div class="demo-drawer__content">
                    <el-form :model="form" style="margin-top:20px;margin-left:20px;margin-right:30px" size="small">
                        <el-form-item label="姓名：" :label-width="formLabelWidth">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="性别：" :label-width="formLabelWidth">
                            <!-- <el-cascader style="width:100px" v-model="value2" :options="options2"
                                @change="handleChange2"></el-cascader> -->
                            <el-select v-model="value2" @change="handleChange2" style="width:75px">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电话号码：" :label-width="formLabelWidth">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="住址：" :label-width="formLabelWidth">
                            <el-input v-model="form.place"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" :label-width="formLabelWidth">
                            <el-input v-model="form.idCard"></el-input>
                        </el-form-item>
                        <el-form-item label="状态：" :label-width="formLabelWidth">
                            <el-cascader style="width:100px" v-model="value1" :options="options" @change="handleChange">
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="提交时间：" :label-width="formLabelWidth">
                            <el-date-picker v-model="timevalue" type="datetime" placeholder="选择日期时间"
                                value-format="yyyy-MM-dd HH:mm:ss" @change="getTime1" :default-time="['12:00:00']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="用户名：" :label-width="formLabelWidth">
                            <el-input v-model="form.account" size="mini"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="demo-drawer__footer" style="text-align: center">
                        <el-button @click="cancelForm">取 消</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="primary" @click="$refs.editDrawer.closeDrawer()" :loading="dialogloading">{{
                        dialogloading ? '提交中 ...' : '修 改'
                        }}</el-button>
                    </div>
                </div>
            </el-drawer>
        </el-tabs>

        <el-dialog title="增加账号" width="25%" :visible.sync="dialogFormVisible" append-to-body center
            :close-on-click-modal="false">
            <el-form style="text-align: center">
                <el-form-item label="">
                    账号:&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="addlandlord.account" autocomplete="off"
                        placeholder="请输入账号(长度2-10)" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="">
                    密码:&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="addlandlord.password" autocomplete="off"
                        placeholder="请输入密码(长度6-20)" style="width: 220px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addLandlord">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            addlandlord: {
                account: '',
                password: ''
            },
            dialogFormVisible: false,
            timevalue: [],
            value1: [],
            value2: [],
            options: [{
                value: 'y',
                label: '已认证'
            }, {
                value: 'n',
                label: '未认证'
            }, {
                value: 's',
                label: '待审核'
            }, {
                value: 'x',
                label: '已迁出'
            }],
            options2: [{
                value: '男',
                label: '男'
            }, {
                value: '女',
                label: '女'
            }],
            dialog: false,
            editDialog: false,
            dialogloading: false,
            form: {
                id: 0,
                name: '',
                gender: '',
                place: '',
                idCard: '',
                subTime: '',
                phone: '',
                status: '',
                account: ''
            },
            formLabelWidth: '100px',
            timer: null,
            imgSrc: "",
            loading: false,
            isload: true,
            fileType: ["jpg", "png", "jpeg", "tif", "bmp"],
            imageUrl: '',
            activeName: 'first',
            tableData: [],
            value: [],
            landlord: {
                name: "",
                phone: "",
                place: "",
                status: "",
                minSubTime: "",
                maxSubTime: "",
                page: 1,
                pageSize: 10,
            },
            pagesizes: [10, 20, 50, 100],
            total: 100,
        }
    },
    computed: {
        headers() {
            const jwt = localStorage.getItem('jwt')
            return {
                jwt: jwt
            };
        }
    },
    methods: {
        importExcel() {
            this.$message({
                message: '导入成功！',
                type: 'success'
            });
            let p = this.landlord.page;
            this.changePage(p);
        },
        addLandlord() {
            this.$axios.post("/yz/add", this.addlandlord).then(r => {
                if (r.data.code == 200) {
                    this.$message({
                        message: '增加成功！',
                        type: 'success'
                    });
                    this.cancel();
                }
            });

        },
        cancel() {
            this.dialogFormVisible = false;
            this.addlandlord.account = "";
            this.addlandlord.password = "";

        },
        show() {
            this.cancel();
            this.dialogFormVisible = true;
        },
        handleChange(val) {
            this.form.status = val[0];
        },
        handleChange2(val) {
            this.form.gender = val[0];
        },
        doPass() {
            this.$confirm('确定通过吗？', {
                modal: false
            })
                .then(_ => {
                    this.dialogloading = true;
                    this.$axios.post("/yz/update", {
                        id: this.form.id,
                        status: 'y'
                    }).then(r => {
                        if (r.data.code == 200) {
                            let p = this.landlord.page;
                            this.changePage(p);
                            this.$message({
                                message: '审核通过！',
                                type: 'success'
                            });
                            this.cancelForm();
                            this.dialogloading = false;
                        } else if (r.data.code == 502) {
                            alert("无权限访问，请重新登录");
                            this.dialogloading = false;
                        }
                    })
                })
                .catch(_ => { });

        },
        doReject() {
            this.$confirm('确定驳回吗？', {
                modal: false
            })
                .then(_ => {
                    this.dialogloading = true;
                    this.$axios.post("/yz/update", {
                        id: this.form.id,
                        status: 'n'
                    }).then(r => {
                        if (r.data.code == 200) {
                            let p = this.landlord.page;
                            this.changePage(p);
                            this.$message({
                                message: '操作成功！',
                                type: 'success'
                            });
                            this.cancelForm();
                            this.dialogloading = false;
                        } else if (r.data.code == 502) {
                            alert("无权限访问，请重新登录");
                            this.dialogloading = false;
                        }
                    })
                })
                .catch(_ => { });
        },
        doExamine(row) {
            // console.log(row);
            this.form.name = row.name;
            this.form.gender = row.gender;
            this.form.place = row.place;
            this.form.phone = row.phone;
            this.form.idCard = row.idCard;
            this.form.subTime = row.subTime;
            this.form.status = row.status;
            this.form.id = row.id;
            this.dialog = true;
        },
        doEdit(row) {
            //可以直接等于row，修改会同步到界面，需要考虑操作失败的复原row copy
            // this.form = row;
            this.form.name = row.name;
            this.form.gender = row.gender;
            this.form.place = row.place;
            this.form.phone = row.phone;
            this.form.idCard = row.idCard;
            this.form.subTime = row.subTime;
            this.form.status = row.status;
            this.form.id = row.id;
            this.form.account = row.account;

            this.value1 = row.status;
            this.value2 = row.gender;
            this.timevalue = row.subTime;
            this.editDialog = true;
        },
        handleClose(done) {
            if (this.loading) {
                return;
            }

            this.$confirm('确定要修改吗？', {
                modal: false
            })
                .then(_ => {
                    this.dialogloading = true;
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.dialogloading = false;
                        }, 400);

                    }, 1000);
                    this.$axios.post("/yz/update", this.form).then(r => {
                        if (r.data.code == 200) {
                            let p = this.landlord.page;
                            this.changePage(p);
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                        } else if (r.data.code == 502) {
                            alert("无权限访问，请重新登录");
                        }
                    })

                })
                .catch(_ => { });
        },
        cancelForm() {
            this.form.id = 0;
            this.loading = false;
            this.dialog = false;
            this.editDialog = false;
            clearTimeout(this.timer);
        },



        dochangePage(p) {
            this.isload = true;
            this.changePage(p);
        },
        changePage(p) {
            this.landlord.page = p;
            this.$axios.post("/yz/list", this.landlord).then(r => {
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data;
                    this.total = r.data.data.totalNum;
                    this.isload = false;
                } else if (r.data.code == 502) {
                    alert("无权限访问，请重新登录");
                }
            })
        },
        changeSize(s) {
            this.isload = true;
            this.landlord.pageSize = s;
            this.$axios.post("/yz/list", this.landlord).then(r => {
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data;
                    this.total = r.data.data.totalNum;
                    this.isload = false;
                } else if (r.data.code == 502) {
                    alert("无权限访问，请重新登录");
                }
            })
        },
        handleClick(tab, event) {
            if (tab.name == "first") {
                this.landlord.status = "";
                this.isload = true;
                this.changePage(1)
            }
            if (tab.name == "second") {
                this.landlord.status = "y";
                this.isload = true;
                this.changePage(1)
            }
            if (tab.name == "third") {
                this.landlord.status = "s";
                this.isload = true;
                this.changePage(1)
            }
            if (tab.name == "fourth") {
                this.landlord.status = "n";
                this.isload = true;
                this.changePage(1)
            }
            if (tab.name == "fifth") {
                this.landlord.status = "x";
                this.isload = true;
                this.changePage(1)
            }
        },
        doSelect() {
            this.isload = true;
            this.changePage(1);
        },
        doDownload() {
            this.$axios
                .post("/yz/download", this.landlord, {
                    responseType: "blob",
                })
                .then((flow) => {
                    if (!flow.data) return;
                    const blob = new Blob([flow.data]);
                    const blobUrl = window.URL.createObjectURL(blob);
                    const a = document.createElement("a");
                    a.style.display = "none";
                    a.download = "Landlord.xlsx"; // 自定义下载的文件名
                    a.href = blobUrl;
                    a.click();
                });
        },
        getTime() {
            if (this.value != null) {
                this.landlord.minSubTime = this.value[0];
                this.landlord.maxSubTime = this.value[1];
            } else {
                this.landlord.minSubTime = "";
                this.landlord.maxSubTime = "";
            }
            // console.log(this.landlord.minSubTime, this.landlord.maxSubTime);
        },
        getTime1() {
            if (this.timevalue != null) {
                this.form.subTime = this.timevalue;
            } else {
                this.form.subTime = "";
            }
            // console.log(this.form.subTime);
        },

        //用于后续业主上传头像
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            console.log(this.imageUrl);
            this.loading = false;
            this.$message({
                message: '上传成功',
                type: 'success'
            });
            this.loading = false;
        },
        beforeAvatarUpload(file) {
            this.loading = true;
            let fileExtension = "";
            if (file.name.lastIndexOf(".") > -1) {
                fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
            }
            let isTypeOk = false;
            if (fileExtension) {
                for (const i of this.fileType) {
                    if (i === fileExtension) {
                        isTypeOk = true;
                    }
                }


            }
            // console.log(isTypeOk)

            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isTypeOk) {
                this.$message.error('上传头像图片只能是 jpg/png/jpeg/tif/bmp 格式!');
                this.loading = false;
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                this.loading = false;
            }
            return isTypeOk && isLt2M;
        }


    },
    created: function () {
        this.isload = true;
        this.changePage(1);

        //用于后续业主取头像
        // this.$axios.get("http://localhost:8080/api/v1/yz/getphoto/1", { responseType: "blob" }).then(res => {
        //     let blob = new window.Blob([res.data]);
        //     let url = window.URL.createObjectURL(blob);
        //     this.imgSrc = url;
        //     console.log(blob)
        // });
    }
}

</script>

<style>
.demo-drawer__content {
    font-weight: bold;
    min-width: 100px;
}

.el-main {
    line-height: 20px;
    text-align: left;
}

.myspan {
    font-weight: normal;
}

/* .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
} */


.v-modal {
    position: absolute;
    background: #000;
}

.el-drawer.rtl {
    height: 70%;
    top: 21%;
    bottom: 9%;
    right: 80px;
}

.el-drawer__header {
    margin-bottom: 0px;
    padding: 20px 20px 0;
}

/* .el-form-item__label {
    font-weight: bold;
}
 */


.el-cascader-menu {
    min-width: 100px;
}

.excel {
    margin-left: 40px;
}
</style>